<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>合约交友 - 高级筛选</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #5b21b6;
            --primary-light: #a78bfa;
            --primary-dark: #4c1d95;
            --secondary: #0ea5e9;
            --accent: #f97316;
            --success: #10b981;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 55px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: var(--shadow);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--primary-dark);
        }
        
        .nav-action {
            color: var(--text-secondary);
            background: none;
            border: none;
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-action.primary {
            color: var(--primary);
            font-weight: 500;
            font-size: 0.95rem;
        }
        
        .nav-action:hover {
            background-color: var(--bg-light);
        }
        
        /* 筛选容器 */
        .filter-container {
            padding: 15px;
        }
        
        /* 活跃筛选标签 */
        .active-filters {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 10px 15px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .active-filters-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        
        .active-filter-tag {
            background-color: rgba(91, 33, 182, 0.1);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .active-filter-tag .remove {
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        /* 搜索栏 */
        .search-container {
            padding: 12px 15px;
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin-bottom: 15px;
        }
        
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            padding: 10px 15px 10px 40px;
            border-radius: 25px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 15px;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }
        
        /* 筛选区块 */
        .filter-section {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            margin-bottom: 15px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .filter-section:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .filter-section-header {
            padding: 13px 15px;
            font-weight: 600;
            font-size: 0.95rem;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        
        .filter-section-header .clear {
            color: var(--primary);
            font-size: 0.8rem;
            font-weight: normal;
            background: none;
            border: none;
        }
        
        .filter-section-header .badge {
            background-color: rgba(91, 33, 182, 0.1);
            color: var(--primary);
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 10px;
        }
        
        .filter-content {
            padding: 12px 15px;
        }
        
        /* 标签筛选 */
        .tag-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 5px 0;
        }
        
        .filter-tag {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            white-space: nowrap;
            transition: all 0.2s ease;
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        /* 滑块筛选 */
        .range-slider {
            width: 100%;
            margin: 15px 0 20px;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .custom-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--border-light);
            outline: none;
        }
        
        .custom-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 0 5px rgba(91, 33, 182, 0.3);
            transition: all 0.15s ease;
        }
        
        .custom-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }
        
        .range-value {
            text-align: center;
            font-weight: 500;
            color: var(--primary);
            margin-top: 8px;
        }
        
        /* 双滑块范围选择 */
        .double-range {
            position: relative;
            margin: 20px 0;
        }
        
        .double-range-track {
            height: 6px;
            background: var(--border-light);
            border-radius: 3px;
            position: relative;
        }
        
        .double-range-progress {
            position: absolute;
            height: 6px;
            background: var(--primary);
            border-radius: 3px;
            left: 20%;
            right: 60%;
        }
        
        .double-range-thumb {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--primary);
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 5px rgba(91, 33, 182, 0.3);
            cursor: pointer;
        }
        
        .double-range-thumb.min {
            left: 20%;
        }
        
        .double-range-thumb.max {
            left: 60%;
        }
        
        .double-range-values {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .double-range-value {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 复选框筛选 */
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
            padding: 5px;
            border-radius: 8px;
        }
        
        .checkbox-item:hover {
            background-color: var(--bg-light);
        }
        
        .custom-checkbox {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .custom-checkbox.checked {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        .checkbox-label {
            font-size: 0.85rem;
            color: var(--text-primary);
        }
        
        /* 单选按钮筛选 */
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .radio-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            border: 1px solid var(--border-light);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .radio-item:hover {
            background-color: var(--bg-light);
        }
        
        .radio-item.selected {
            border-color: var(--primary);
            background-color: rgba(91, 33, 182, 0.1);
        }
        
        .custom-radio {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .radio-item.selected .custom-radio::after {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--primary);
        }
        
        /* 日期筛选 */
        .date-filter {
            display: flex;
            gap: 10px;
        }
        
        .date-input {
            flex: 1;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            font-size: 0.85rem;
            color: var(--text-primary);
        }
        
        .date-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        /* 下拉选择筛选 */
        .select-filter {
            margin: 10px 0;
        }
        
        .custom-select {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-white);
            font-size: 0.85rem;
            color: var(--text-primary);
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11l4-4H4l4 4z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
        
        .custom-select:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        /* 评分筛选 */
        .rating-filter {
            padding: 10px 0;
        }
        
        .rating-stars {
            display: flex;
            gap: 5px;
            margin: 10px 0;
        }
        
        .rating-star {
            font-size: 1.5rem;
            color: #ddd;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .rating-star.active {
            color: #f59e0b;
        }
        
        /* 底部操作栏 */
        .filter-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 15px;
            background-color: var(--bg-white);
            display: flex;
            gap: 10px;
            border-top: 1px solid var(--border-light);
            z-index: 999;
        }
        
        .filter-action-btn {
            flex: 1;
            padding: 12px 0;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.95rem;
            text-align: center;
            transition: all 0.2s ease;
        }
        
        .reset-btn {
            background-color: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }
        
        .reset-btn:hover {
            background-color: var(--bg-light);
        }
        
        .confirm-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            box-shadow: 0 2px 5px rgba(91, 33, 182, 0.2);
        }
        
        .confirm-btn:hover {
            background-color: var(--primary-dark);
            box-shadow: 0 4px 8px rgba(91, 33, 182, 0.3);
        }
        
        /* 折叠/展开动画 */
        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .collapsible-content.show {
            max-height: 1000px;
            transition: max-height 0.5s ease-in;
        }
        
        .toggle-icon {
            transition: transform 0.3s ease;
        }
        
        .toggle-icon.rotate {
            transform: rotate(180deg);
        }
        
        /* 提示消息 */
        .toast-notification {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 0.85rem;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translate(-50%, 20px);
        }
        
        .toast-notification.show {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        
        /* 筛选预设 */
        .filter-presets {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .presets-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .preset-items {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .preset-item {
            flex: 0 0 auto;
            padding: 8px 15px;
            background-color: var(--bg-light);
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            white-space: nowrap;
            border: 1px solid var(--border-light);
            transition: all 0.2s ease;
        }
        
        .preset-item:hover {
            background-color: rgba(91, 33, 182, 0.1);
            color: var(--primary);
            border-color: var(--primary-light);
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">高级筛选</div>
        <button class="nav-action primary" id="saveFilterBtn">
            保存筛选
        </button>
    </div>
    
    <!-- 筛选容器 -->
    <div class="filter-container">
        <!-- 筛选预设 -->
        <div class="filter-presets">
            <div class="presets-title">常用筛选</div>
            <div class="preset-items">
                <div class="preset-item" onclick="applyPreset('附近短期')">附近短期合约</div>
                <div class="preset-item" onclick="applyPreset('长期学习')">长期学习搭档</div>
                <div class="preset-item" onclick="applyPreset('周末活动')">周末活动邀约</div>
                <div class="preset-item" onclick="applyPreset('技能交换')">技能交换合约</div>
                <div class="preset-item" onclick="applyPreset('优质')">优质认证用户</div>
            </div>
        </div>
        
        <!-- 活跃筛选标签 -->
        <div class="active-filters">
            <span class="active-filters-label">已选筛选:</span>
            <div class="active-filter-tag">
                <span>1-3个月</span>
                <i class="fas fa-times remove" onclick="removeFilter(this)"></i>
            </div>
            <div class="active-filter-tag">
                <span>有照片</span>
                <i class="fas fa-times remove" onclick="removeFilter(this)"></i>
            </div>
            <div class="active-filter-tag">
                <span>AA制</span>
                <i class="fas fa-times remove" onclick="removeFilter(this)"></i>
            </div>
        </div>
        
        <!-- 搜索栏 -->
        <div class="search-container">
            <div class="search-box">
                <i class="fas fa-search search-icon"></i>
                <input type="text" class="search-input" placeholder="搜索合约关键词、标签或用户...">
            </div>
        </div>
        
        <!-- 合约类型筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>合约类型</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content show">
                <div class="tag-filter">
                    <button class="filter-tag active">全部类型</button>
                    <button class="filter-tag">短期陪伴</button>
                    <button class="filter-tag">兴趣伙伴</button>
                    <button class="filter-tag">学习搭档</button>
                    <button class="filter-tag">旅行同伴</button>
                    <button class="filter-tag">活动邀约</button>
                    <button class="filter-tag">技能交换</button>
                    <button class="filter-tag">运动伙伴</button>
                    <button class="filter-tag">商务陪同</button>
                </div>
            </div>
        </div>
        
        <!-- 距离筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>距离范围</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content show">
                <div class="range-slider">
                    <div class="range-labels">
                        <span>0km</span>
                        <span>50km</span>
                    </div>
                    <input type="range" min="0" max="50" value="10" class="custom-slider" id="distanceSlider">
                    <div class="range-value" id="distanceValue">10公里以内</div>
                </div>
            </div>
        </div>
        
        <!-- 基本信息筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>基本信息</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <!-- 性别筛选 -->
                <div class="mb-4">
                    <div class="filter-section-header" style="padding: 5px 0; border: none;">
                        <span style="font-size: 0.9rem;">对方性别</span>
                    </div>
                    <div class="radio-group">
                        <div class="radio-item selected" onclick="selectRadio(this)">
                            <div class="custom-radio"></div>
                            <span>不限</span>
                        </div>
                        <div class="radio-item" onclick="selectRadio(this)">
                            <div class="custom-radio"></div>
                            <span>男</span>
                        </div>
                        <div class="radio-item" onclick="selectRadio(this)">
                            <div class="custom-radio"></div>
                            <span>女</span>
                        </div>
                    </div>
                </div>
                
                <!-- 年龄范围 - 双滑块 -->
                <div>
                    <div class="filter-section-header" style="padding: 5px 0; border: none; margin-bottom: 10px;">
                        <span style="font-size: 0.9rem;">年龄范围</span>
                    </div>
                    <div class="double-range">
                        <div class="double-range-track">
                            <div class="double-range-progress"></div>
                            <div class="double-range-thumb min" id="ageMinThumb"></div>
                            <div class="double-range-thumb max" id="ageMaxThumb"></div>
                        </div>
                        <div class="double-range-values">
                            <span class="double-range-value" id="ageMinValue">20岁</span>
                            <span class="double-range-value" id="ageMaxValue">40岁</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 合约时长筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>合约时长</span>
                <span class="badge">1</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <div class="checkbox-group">
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">1天以内</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">1-7天</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox checked">
                            <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                        </div>
                        <span class="checkbox-label">1-3个月</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">3-6个月</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">6-12个月</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">长期</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 时间筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>开始时间</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <div class="date-filter">
                    <input type="date" class="date-input" id="startDate">
                    <input type="date" class="date-input" id="endDate">
                </div>
                <div class="radio-group" style="margin-top: 15px;">
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>今天</span>
                    </div>
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>本周</span>
                    </div>
                    <div class="radio-item selected" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>本月</span>
                    </div>
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>自定义</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 预算筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>预算范围</span>
                <button class="clear">清除</button>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <div class="range-slider">
                    <div class="range-labels">
                        <span>0元</span>
                        <span>10000元</span>
                    </div>
                    <input type="range" min="0" max="10000" value="2000" class="custom-slider" id="budgetSlider">
                    <div class="range-value" id="budgetValue">0-2000元</div>
                </div>
                <div class="radio-group" style="margin-top: 15px;">
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>免费</span>
                    </div>
                    <div class="radio-item selected" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>AA制</span>
                    </div>
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>对方付费</span>
                    </div>
                    <div class="radio-item" onclick="selectRadio(this)">
                        <div class="custom-radio"></div>
                        <span>我付费</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 用户质量筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>用户质量</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <!-- 评分筛选 -->
                <div class="rating-filter">
                    <div class="filter-section-header" style="padding: 5px 0; border: none;">
                        <span style="font-size: 0.9rem;">最低评分</span>
                    </div>
                    <div class="rating-stars">
                        <i class="fas fa-star rating-star active" data-rating="1" onclick="setRating(this)"></i>
                        <i class="fas fa-star rating-star active" data-rating="2" onclick="setRating(this)"></i>
                        <i class="fas fa-star rating-star" data-rating="3" onclick="setRating(this)"></i>
                        <i class="fas fa-star rating-star" data-rating="4" onclick="setRating(this)"></i>
                        <i class="fas fa-star rating-star" data-rating="5" onclick="setRating(this)"></i>
                    </div>
                    <div class="text-center text-sm text-secondary">
                        最低2星以上用户
                    </div>
                </div>
                
                <!-- 认证等级 -->
                <div class="select-filter">
                    <div class="filter-section-header" style="padding: 5px 0; border: none; margin-top: 10px;">
                        <span style="font-size: 0.9rem;">认证等级</span>
                    </div>
                    <select class="custom-select" id="verifyLevel">
                        <option value="all">全部用户</option>
                        <option value="basic">基础认证</option>
                        <option value="realname">实名认证</option>
                        <option value="advanced">高级认证</option>
                        <option value="vip">VIP认证</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- 特殊要求筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>特殊要求</span>
                <span class="badge">1</span>
                <button class="clear">清除</button>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <div class="checkbox-group">
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">必须实名认证</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox checked">
                            <i class="fas fa-check" style="font-size: 0.8rem;"></i>
                        </div>
                        <span class="checkbox-label">有照片</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">无不良记录</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">有类似经验</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">可视频验证</span>
                    </div>
                    <div class="checkbox-item" onclick="toggleCheckbox(this)">
                        <div class="custom-checkbox">
                            <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                        </div>
                        <span class="checkbox-label">需签署协议</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 更多筛选 -->
        <div class="filter-section">
            <div class="filter-section-header" onclick="toggleCollapse(this)">
                <span>更多筛选</span>
                <i class="fas fa-chevron-down toggle-icon"></i>
            </div>
            <div class="filter-content collapsible-content">
                <div class="filter-section" style="margin-bottom: 10px;">
                    <div class="filter-section-header" style="padding: 8px 0; border: none;">
                        <span style="font-size: 0.9rem;">兴趣爱好</span>
                    </div>
                    <div class="filter-content" style="padding: 0;">
                        <div class="tag-filter">
                            <button class="filter-tag active">全部</button>
                            <button class="filter-tag">运动</button>
                            <button class="filter-tag">音乐</button>
                            <button class="filter-tag">阅读</button>
                            <button class="filter-tag">电影</button>
                            <button class="filter-tag">美食</button>
                            <button class="filter-tag">旅行</button>
                            <button class="filter-tag">游戏</button>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <div class="filter-section-header" style="padding: 8px 0; border: none;">
                        <span style="font-size: 0.9rem;">学历要求</span>
                    </div>
                    <div class="filter-content" style="padding: 0;">
                        <div class="radio-group">
                            <div class="radio-item selected" onclick="selectRadio(this)">
                                <div class="custom-radio"></div>
                                <span>不限</span>
                            </div>
                            <div class="radio-item" onclick="selectRadio(this)">
                                <div class="custom-radio"></div>
                                <span>大专</span>
                            </div>
                            <div class="radio-item" onclick="selectRadio(this)">
                                <div class="custom-radio"></div>
                                <span>本科</span>
                            </div>
                            <div class="radio-item" onclick="selectRadio(this)">
                                <div class="custom-radio"></div>
                                <span>硕士</span>
                            </div>
                            <div class="radio-item" onclick="selectRadio(this)">
                                <div class="custom-radio"></div>
                                <span>博士</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 语言能力 -->
                <div class="filter-section" style="margin-top: 10px;">
                    <div class="filter-section-header" style="padding: 8px 0; border: none;">
                        <span style="font-size: 0.9rem;">语言能力</span>
                    </div>
                    <div class="filter-content" style="padding: 0;">
                        <div class="checkbox-group">
                            <div class="checkbox-item" onclick="toggleCheckbox(this)">
                                <div class="custom-checkbox">
                                    <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                                </div>
                                <span class="checkbox-label">英语流利</span>
                            </div>
                            <div class="checkbox-item" onclick="toggleCheckbox(this)">
                                <div class="custom-checkbox">
                                    <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                                </div>
                                <span class="checkbox-label">日语流利</span>
                            </div>
                            <div class="checkbox-item" onclick="toggleCheckbox(this)">
                                <div class="custom-checkbox">
                                    <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                                </div>
                                <span class="checkbox-label">韩语流利</span>
                            </div>
                            <div class="checkbox-item" onclick="toggleCheckbox(this)">
                                <div class="custom-checkbox">
                                    <i class="fas fa-check" style="font-size: 0.8rem; display: none;"></i>
                                </div>
                                <span class="checkbox-label">粤语流利</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 留出底部空间 -->
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="filter-actions">
        <button class="filter-action-btn reset-btn" id="resetBtn">
            重置筛选
        </button>
        <button class="filter-action-btn confirm-btn" id="confirmBtn">
            应用筛选
        </button>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 提示消息
        function showToast(message) {
            let toast = document.querySelector('.toast-notification');
            if (toast) {
                toast.remove();
            }
            
            toast = document.createElement('div');
            toast.className = 'toast-notification';
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);
            
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 2500);
        }
        
        // 折叠/展开筛选区块
        function toggleCollapse(element) {
            const content = element.nextElementSibling;
            const icon = element.querySelector('.toggle-icon');
            
            content.classList.toggle('show');
            icon.classList.toggle('rotate');
        }
        
        // 标签筛选切换
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是"全部类型"，取消其他选中状态
                if (this.textContent === '全部类型' || this.textContent === '全部') {
                    const parentGroup = this.parentElement;
                    parentGroup.querySelectorAll('.filter-tag').forEach(t => {
                        t.classList.remove('active');
                    });
                    this.classList.add('active');
                    updateActiveFilters();
                } 
                // 如果点击的是已选中的标签，取消选中
                else if (this.classList.contains('active')) {
                    this.classList.remove('active');
                    updateActiveFilters();
                } 
                // 否则选中该标签，并取消"全部"的选中状态
                else {
                    const parentGroup = this.parentElement;
                    parentGroup.querySelectorAll('.filter-tag').forEach(t => {
                        if (t.textContent === '全部类型' || t.textContent === '全部') {
                            t.classList.remove('active');
                        }
                    });
                    this.classList.add('active');
                    updateActiveFilters();
                }
            });
        });
        
        // 滑块筛选值更新
        const distanceSlider = document.getElementById('distanceSlider');
        const distanceValue = document.getElementById('distanceValue');
        
        distanceSlider.addEventListener('input', function() {
            distanceValue.textContent = `${this.value}公里以内`;
            updateActiveFilters();
        });
        
        const budgetSlider = document.getElementById('budgetSlider');
        const budgetValue = document.getElementById('budgetValue');
        
        budgetSlider.addEventListener('input', function() {
            budgetValue.textContent = `0-${this.value}元`;
            updateActiveFilters();
        });
        
        // 双滑块年龄范围
        const ageMinThumb = document.getElementById('ageMinThumb');
        const ageMaxThumb = document.getElementById('ageMaxThumb');
        const ageMinValue = document.getElementById('ageMinValue');
        const ageMaxValue = document.getElementById('ageMaxValue');
        const ageProgress = document.querySelector('.double-range-progress');
        
        let isDraggingMin = false;
        let isDraggingMax = false;
        
        // 初始化双滑块位置
        updateAgeRange(20, 40);
        
        // 双滑块拖动功能
        ageMinThumb.addEventListener('mousedown', () => isDraggingMin = true);
        ageMaxThumb.addEventListener('mousedown', () => isDraggingMax = true);
        
        document.addEventListener('mousemove', handleDrag);
        document.addEventListener('mouseup', () => {
            isDraggingMin = false;
            isDraggingMax = false;
        });
        
        // 触摸设备支持
        ageMinThumb.addEventListener('touchstart', (e) => {
            isDraggingMin = true;
            e.preventDefault();
        });
        
        ageMaxThumb.addEventListener('touchstart', (e) => {
            isDraggingMax = true;
            e.preventDefault();
        });
        
        document.addEventListener('touchmove', (e) => {
            handleDrag(e.touches[0]);
            e.preventDefault();
        });
        
        document.addEventListener('touchend', () => {
            isDraggingMin = false;
            isDraggingMax = false;
        });
        
        function handleDrag(event) {
            const track = document.querySelector('.double-range-track');
            const rect = track.getBoundingClientRect();
            const trackWidth = rect.width;
            const trackLeft = rect.left;
            
            let clientX = event.clientX || event.pageX;
            let position = ((clientX - trackLeft) / trackWidth) * 100;
            position = Math.max(0, Math.min(100, position));
            
            if (isDraggingMin) {
                // 确保最小值不超过最大值
                const maxPosition = parseFloat(ageMaxThumb.style.left) || 60;
                position = Math.min(position, maxPosition - 5);
                ageMinThumb.style.left = `${position}%`;
                ageProgress.style.left = `${position}%`;
                
                const age = Math.round(18 + (position / 100) * 42);
                ageMinValue.textContent = `${age}岁`;
                updateActiveFilters();
            } else if (isDraggingMax) {
                // 确保最大值不小于最小值
                const minPosition = parseFloat(ageMinThumb.style.left) || 20;
                position = Math.max(position, minPosition + 5);
                ageMaxThumb.style.left = `${position}%`;
                ageProgress.style.right = `${100 - position}%`;
                
                const age = Math.round(18 + (position / 100) * 42);
                ageMaxValue.textContent = `${age}岁`;
                updateActiveFilters();
            }
        }
        
        function updateAgeRange(min, max) {
            const minPercent = ((min - 18) / 42) * 100;
            const maxPercent = ((max - 18) / 42) * 100;
            
            ageMinThumb.style.left = `${minPercent}%`;
            ageMaxThumb.style.left = `${maxPercent}%`;
            ageProgress.style.left = `${minPercent}%`;
            ageProgress.style.right = `${100 - maxPercent}%`;
            
            ageMinValue.textContent = `${min}岁`;
            ageMaxValue.textContent = `${max}岁`;
        }
        
        // 复选框切换
        function toggleCheckbox(element) {
            const checkbox = element.querySelector('.custom-checkbox');
            const checkIcon = checkbox.querySelector('i');
            const label = element.querySelector('.checkbox-label').textContent;
            
            checkbox.classList.toggle('checked');
            
            if (checkbox.classList.contains('checked')) {
                checkIcon.style.display = 'block';
            } else {
                checkIcon.style.display = 'none';
            }
            
            // 更新筛选计数
            updateFilterCount(element.closest('.filter-section'));
            updateActiveFilters();
        }
        
        // 单选按钮选择
        function selectRadio(element) {
            const parentGroup = element.parentElement;
            const radioItems = parentGroup.querySelectorAll('.radio-item');
            const selectedText = element.querySelector('span').textContent;
            
            radioItems.forEach(item => {
                item.classList.remove('selected');
            });
            
            element.classList.add('selected');
            
            updateActiveFilters();
        }
        
        // 评分筛选
        function setRating(star) {
            const rating = parseInt(star.getAttribute('data-rating'));
            const stars = document.querySelectorAll('.rating-star');
            
            stars.forEach(s => {
                const sRating = parseInt(s.getAttribute('data-rating'));
                if (sRating <= rating) {
                    s.classList.add('active');
                } else {
                    s.classList.remove('active');
                }
            });
            
            document.querySelector('.rating-filter .text-secondary').textContent = 
                `最低${rating}星以上用户`;
                
            updateActiveFilters();
        }
        
        // 更新筛选计数
        function updateFilterCount(section) {
            const header = section.querySelector('.filter-section-header');
            const checkboxGroup = section.querySelector('.checkbox-group');
            
            if (checkboxGroup) {
                const checkedCount = checkboxGroup.querySelectorAll('.custom-checkbox.checked').length;
                let badge = header.querySelector('.badge');
                
                if (checkedCount > 0) {
                    if (!badge) {
                        badge = document.createElement('span');
                        badge.className = 'badge';
                        header.insertBefore(badge, header.querySelector('.toggle-icon'));
                    }
                    badge.textContent = checkedCount;
                } else if (badge) {
                    badge.remove();
                }
            }
        }
        
        // 更新活跃筛选标签
        function updateActiveFilters() {
            const activeFiltersContainer = document.querySelector('.active-filters');
            const filterLabels = activeFiltersContainer.querySelectorAll('.active-filter-tag');
            
            // 保留标签容器，清除现有标签
            filterLabels.forEach(label => label.remove());
            
            // 添加合约类型筛选
            document.querySelectorAll('.filter-tag.active').forEach(tag => {
                if (tag.textContent !== '全部类型' && tag.textContent !== '全部') {
                    addActiveFilterTag(tag.textContent);
                }
            });
            
            // 添加距离筛选
            if (distanceSlider.value != 10) {
                addActiveFilterTag(`${distanceSlider.value}公里以内`);
            }
            
            // 添加年龄范围筛选
            const minAge = parseInt(ageMinValue.textContent);
            const maxAge = parseInt(ageMaxValue.textContent);
            if (minAge != 20 || maxAge != 40) {
                addActiveFilterTag(`${minAge}-${maxAge}岁`);
            }
            
            // 添加合约时长筛选
            document.querySelectorAll('.checkbox-item .custom-checkbox.checked').forEach(checkbox => {
                const label = checkbox.closest('.checkbox-item').querySelector('.checkbox-label').textContent;
                addActiveFilterTag(label);
            });
            
            // 添加预算筛选
            if (budgetSlider.value != 2000) {
                addActiveFilterTag(`0-${budgetSlider.value}元`);
            }
            
            // 添加付费方式筛选
            document.querySelectorAll('.radio-item.selected').forEach(radio => {
                const label = radio.querySelector('span').textContent;
                if (label !== '不限' && label !== '自定义') {
                    addActiveFilterTag(label);
                }
            });
            
            // 如果没有活跃筛选，显示提示
            if (activeFiltersContainer.querySelectorAll('.active-filter-tag').length === 0) {
                const noFilterTag = document.createElement('span');
                noFilterTag.className = 'text-secondary text-sm';
                noFilterTag.textContent = '未选择筛选条件';
                activeFiltersContainer.appendChild(noFilterTag);
            }
        }
        
        // 添加活跃筛选标签
        function addActiveFilterTag(text) {
            const activeFiltersContainer = document.querySelector('.active-filters');
            
            // 移除"未选择筛选条件"提示
            const noFilterTag = activeFiltersContainer.querySelector('.text-secondary.text-sm');
            if (noFilterTag) {
                noFilterTag.remove();
            }
            
            const tag = document.createElement('div');
            tag.className = 'active-filter-tag';
            tag.innerHTML = `<span>${text}</span><i class="fas fa-times remove" onclick="removeFilter(this)"></i>`;
            activeFiltersContainer.appendChild(tag);
        }
        
        // 移除筛选条件
        function removeFilter(element) {
            const tagText = element.parentElement.querySelector('span').textContent;
            const tagElement = element.parentElement;
            
            // 移除标签
            tagElement.remove();
            
            // 根据标签文本找到对应的筛选条件并重置
            if (tagText.includes('公里')) {
                distanceSlider.value = 10;
                distanceValue.textContent = '10公里以内';
            } else if (tagText.includes('岁') && tagText.includes('-')) {
                const [min, max] = tagText.split('-').map(Number);
                updateAgeRange(20, 40);
            } else if (tagText.includes('元')) {
                budgetSlider.value = 2000;
                budgetValue.textContent = '0-2000元';
            } else {
                // 处理标签筛选
                document.querySelectorAll('.filter-tag').forEach(tag => {
                    if (tag.textContent === tagText) {
                        tag.classList.remove('active');
                        // 如果没有选中的标签，选中"全部"
                        const parentGroup = tag.parentElement;
                        if (parentGroup.querySelectorAll('.filter-tag.active').length === 0) {
                            parentGroup.querySelector('.filter-tag').classList.add('active');
                        }
                    }
                });
                
                // 处理复选框筛选
                document.querySelectorAll('.checkbox-label').forEach(label => {
                    if (label.textContent === tagText) {
                        const checkbox = label.closest('.checkbox-item').querySelector('.custom-checkbox');
                        const checkIcon = checkbox.querySelector('i');
                        
                        checkbox.classList.remove('checked');
                        checkIcon.style.display = 'none';
                        
                        // 更新筛选计数
                        updateFilterCount(label.closest('.filter-section'));
                    }
                });
                
                // 处理单选按钮筛选
                document.querySelectorAll('.radio-item span').forEach(label => {
                    if (label.textContent === tagText) {
                        const radioGroup = label.closest('.radio-group');
                        radioGroup.querySelectorAll('.radio-item').forEach(item => {
                            item.classList.remove('selected');
                        });
                        radioGroup.querySelector('.radio-item:first-child').classList.add('selected');
                    }
                });
            }
            
            // 更新活跃筛选标签
            updateActiveFilters();
            showToast(`已移除筛选: ${tagText}`);
        }
        
        // 应用筛选预设
        function applyPreset(presetName) {
            // 重置所有筛选条件
            resetAllFilters();
            
            // 根据预设名称应用不同的筛选条件
            switch(presetName) {
                case '附近短期':
                    distanceSlider.value = 5;
                    distanceValue.textContent = '5公里以内';
                    
                    // 选择短期合约
                    const shortTerm = document.querySelectorAll('.checkbox-label')[1].closest('.checkbox-item');
                    toggleCheckbox(shortTerm);
                    break;
                    
                case '长期学习':
                    // 选择学习搭档
                    document.querySelectorAll('.filter-tag')[3].click();
                    
                    // 选择长期合约
                    const longTerm = document.querySelectorAll('.checkbox-label')[5].closest('.checkbox-item');
                    toggleCheckbox(longTerm);
                    
                    // 设置年龄范围
                    updateAgeRange(18, 30);
                    break;
                    
                case '周末活动':
                    // 选择活动邀约
                    document.querySelectorAll('.filter-tag')[5].click();
                    
                    // 选择周末时间
                    document.querySelectorAll('.radio-item span').forEach(label => {
                        if (label.textContent === '本周') {
                            label.closest('.radio-item').click();
                        }
                    });
                    break;
                    
                case '技能交换':
                    // 选择技能交换
                    document.querySelectorAll('.filter-tag')[6].click();
                    
                    // 选择免费
                    document.querySelectorAll('.radio-item span').forEach(label => {
                        if (label.textContent === '免费') {
                            label.closest('.radio-item').click();
                        }
                    });
                    break;
                    
                case '优质':
                    // 选择有照片和实名认证
                    document.querySelectorAll('.checkbox-item')[1].click();
                    document.querySelectorAll('.checkbox-item')[0].click();
                    
                    // 设置评分
                    setRating(document.querySelectorAll('.rating-star')[4]);
                    break;
            }
            
            updateActiveFilters();
            showToast(`已应用预设: ${presetName}`);
        }
        
        // 清除按钮
        document.querySelectorAll('.clear').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation(); // 防止触发父元素的折叠事件
                
                const filterSection = this.closest('.filter-section');
                const filterContent = filterSection.querySelector('.filter-content');
                
                // 重置滑块
                const sliders = filterContent.querySelectorAll('.custom-slider');
                sliders.forEach(slider => {
                    if (slider.id === 'budgetSlider') {
                        slider.value = 2000;
                        document.getElementById('budgetValue').textContent = '0-2000元';
                    }
                });
                
                // 重置单选按钮
                const radioGroups = filterContent.querySelectorAll('.radio-group');
                radioGroups.forEach(group => {
                    const radioItems = group.querySelectorAll('.radio-item');
                    radioItems.forEach(item => item.classList.remove('selected'));
                    radioItems[0].classList.add('selected'); // 默认选中第一个
                });
                
                // 重置复选框
                const checkboxes = filterContent.querySelectorAll('.custom-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.classList.remove('checked');
                    checkbox.querySelector('i').style.display = 'none';
                });
                
                // 更新筛选计数
                updateFilterCount(filterSection);
                updateActiveFilters();
                
                showToast('已清除筛选条件');
            });
        });
        
        // 重置所有筛选条件
        function resetAllFilters() {
            // 重置所有标签
            document.querySelectorAll('.filter-tag').forEach(tag => {
                tag.classList.remove('active');
                if (tag.textContent === '全部类型' || tag.textContent === '全部') {
                    tag.classList.add('active');
                }
            });
            
            // 重置所有滑块
            distanceSlider.value = 10;
            distanceValue.textContent = '10公里以内';
            
            updateAgeRange(20, 40);
            
            budgetSlider.value = 2000;
            budgetValue.textContent = '0-2000元';
            
            // 重置所有单选按钮
            document.querySelectorAll('.radio-group').forEach(group => {
                const radioItems = group.querySelectorAll('.radio-item');
                radioItems.forEach(item => item.classList.remove('selected'));
                radioItems[0].classList.add('selected');
            });
            
            // 重置所有复选框
            document.querySelectorAll('.custom-checkbox').forEach(checkbox => {
                checkbox.classList.remove('checked');
                checkbox.querySelector('i').style.display = 'none';
            });
            
            // 重置评分
            setRating(document.querySelectorAll('.rating-star')[1]);
            
            // 清空日期输入
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
            
            // 清空搜索框
            document.querySelector('.search-input').value = '';
            
            // 更新筛选计数
            document.querySelectorAll('.filter-section').forEach(section => {
                updateFilterCount(section);
            });
        }
        
        // 重置按钮
        document.getElementById('resetBtn').addEventListener('click', function() {
            resetAllFilters();
            updateActiveFilters();
            showToast('已重置所有筛选条件');
        });
        
        // 应用筛选按钮
        document.getElementById('confirmBtn').addEventListener('click', function() {
            // 收集筛选条件
            const selectedTypes = [];
            document.querySelectorAll('.filter-tag.active').forEach(tag => {
                if (tag.textContent !== '全部类型' && tag.textContent !== '全部') {
                    selectedTypes.push(tag.textContent);
                }
            });
            
            const distance = distanceSlider.value;
            const minAge = parseInt(ageMinValue.textContent);
            const maxAge = parseInt(ageMaxValue.textContent);
            const budgetMax = budgetSlider.value;
            
            // 模拟筛选结果统计
            const resultCount = Math.floor(Math.random() * 100) + 10;
            
            showToast(`已应用筛选，找到${resultCount}个符合条件的合约`);
            
            // 实际应用中这里会跳转到结果列表页
            setTimeout(() => {
                window.history.back();
            }, 1000);
        });
        
        // 保存筛选按钮
        document.getElementById('saveFilterBtn').addEventListener('click', function() {
            // 获取当前活跃筛选条件数量
            const activeFilterCount = document.querySelectorAll('.active-filter-tag').length;
            
            if (activeFilterCount > 0) {
                showToast('筛选条件已保存');
            } else {
                showToast('请先选择筛选条件');
            }
        });
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });
        
        // 日期选择联动
        const startDateInput = document.getElementById('startDate');
        const endDateInput = document.getElementById('endDate');
        
        startDateInput.addEventListener('change', function() {
            if (endDateInput.value && this.value > endDateInput.value) {
                endDateInput.value = this.value;
            }
            updateActiveFilters();
        });
        
        endDateInput.addEventListener('change', function() {
            if (startDateInput.value && this.value < startDateInput.value) {
                startDateInput.value = this.value;
            }
            updateActiveFilters();
        });
        
        // 认证等级选择变化
        document.getElementById('verifyLevel').addEventListener('change', function() {
            updateActiveFilters();
        });
        
        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
            // 初始化筛选计数
            document.querySelectorAll('.filter-section').forEach(section => {
                updateFilterCount(section);
            });
        });
    </script>
</body>
</html>

